<template>
  <div class="commentCard">
    <div class="left">
      <div class="img">
        <img v-lazy="data.user.avatarUrl" alt />
      </div>
    </div>
    <div class="right">
      <div class="top">
        <div class="info">
          <p class="name">{{data.user.nickname}}</p>
          <p class="time">{{data.time | getTimeFormat}}</p>
        </div>
        <div class="like">
          <span class="num">{{data.likedCount | likedCountFormat}}</span>
          <span class="icon" :class="data.liked? 'likeTure':''" @click.stop="like(data.liked)"></span>
        </div>
      </div>
      <div class="main">
        <p class="count">{{data.content}}</p>
        <div class="reply" v-if="data.beReplied.length">
          <p>
            <span>@{{data.beReplied[0].user.nickname}}</span>
            :{{data.beReplied[0].content}}
          </p>
        </div>
        <!-- <span class="replyNum">123条回复&gt;</span> -->
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
export default {
  props: ["data"],
  data() {
    return {};
  },
  computed: {
    ...mapState("song_detail", ["song_detail_data"]),
    ...mapState("comment_like", ["comment_like_flag"])
  },
  methods: {
    // 点赞
    like(liked) {
      if (liked) {
        this.getCommentLike(0, 0);
        this.$emit("isliked", { liked: false, data: this.data });
      } else {
        this.getCommentLike(1, 0);
        this.$emit("isliked", { liked: true, data: this.data });
      }
    },
    // 评论点赞接口
    getCommentLike(t, type) {
      this.$store.dispatch("comment_like/getCommentLike", {
        id: this.song_detail_data.songs[0].id,
        cid: this.data.commentId,
        t: t,
        type: type
      });
    }
  },
  filters: {
    likedCountFormat(valueCount) {
      if (valueCount) {
        if (valueCount > 10000) {
          return (valueCount / 10000).toFixed(1) + "万";
        } else {
          return valueCount;
        }
      }
    },
    //时间戳显示格式为几天前、几分钟前、几秒前
    getTimeFormat(valueTime) {
      if (valueTime) {
        // let newData = Date.parse(new Date() + '')
        // let diffTime = Math.abs(newData - valueTime)
        let diffTime = Math.abs(
          new Date().getTime() - new Date(valueTime).getTime()
        );
        let date = new Date(valueTime);
        let y = date.getFullYear();
        let m = date.getMonth() + 1;
        m = m < 10 ? "0" + m : m;
        let d = date.getDate();
        d = d < 10 ? "0" + d : d;
        let h = date.getHours();
        h = h < 10 ? "0" + h : h;
        let minute = date.getMinutes();
        let second = date.getSeconds();
        minute = minute < 10 ? "1" + minute : minute;
        second = second < 10 ? "0" + second : second;
        if (diffTime > 7 * 24 * 3600 * 1000) {
          return y + "年" + m + "月" + d + "日 " + h + ":" + minute;
        } else if (
          diffTime < 7 * 24 * 3600 * 1000 &&
          diffTime > 24 * 3600 * 1000
        ) {
          // //注释("一周之内");
          // var time = newData - diffTime;
          //   let dayNum = Math.floor(diffTime / (24 * 60 * 60 * 1000));
          //   return dayNum + "天前";
          return m + "月" + d + "日";
        } else if (diffTime < 24 * 3600 * 1000 && diffTime > 3600 * 1000) {
          // //注释("一天之内");
          // var time = newData - diffTime;
          let dayNum = Math.floor(diffTime / (60 * 60 * 1000));
          //   return dayNum + "小时前";
          return h + ":" + minute;
        } else if (diffTime < 3600 * 1000 && diffTime > 60 * 1000) {
          // //注释("一小时之内");
          // var time = newData - diffTime;
          let dayNum = Math.floor(diffTime / (60 * 1000));
          return dayNum + "分钟前";
        } else if (diffTime < 60 * 1000 && diffTime > 0) {
          // //注释("一分钟之内");
          return "刚刚";
        }
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.commentCard {
  background-color: #fff;
  overflow: hidden;
  padding: 0.2rem;
  .left {
    box-sizing: border-box;
    width: 10%;
    float: left;
    .img {
      img {
        border-radius: 50%;
      }
    }
  }
  .right {
    margin-left: 3%;
    width: 87%;
    float: left;
    text-align: left;
    border-bottom: 0.01rem solid #ddd;
    .top {
      line-height: 0.8rem;
      overflow: hidden;
      .info {
        float: left;
        padding-top: 0.02rem;
        .name {
          font-size: 0.28rem;
          color: #666;
          line-height: normal;
        }
        .time {
          font-size: 0.22rem;
          color: #999;
          line-height: normal;
        }
      }
      .like {
        float: right;
        .num {
          display: inline-block;
          vertical-align: middle;
          color: #999;
          font-size: 0.28rem;
        }
        .icon {
          background: url(../images/note_btn_praise_white.png) no-repeat;
          background-size: 100% 100%;
          width: 0.4rem;
          height: 0.4rem;
          display: inline-block;
          vertical-align: middle;
          margin-top: -0.1rem;
          margin-left: 0.05rem;
        }
        .icon.likeTure {
          background: url(../images/note_btn_praised.png) no-repeat;
          background-size: 100% 100%;
        }
      }
    }
    .main {
      padding-top: 0.2rem;
      padding-bottom: 0.2rem;
      .count {
        font-size: 0.3rem;
        color: #555;
        line-height: 0.6rem;
      }
      .reply {
        border-left: 0.04rem solid #eee;
        padding-left: 0.2rem;
        p {
          line-height: 0.4rem;
          font-size: 0.28rem;
          color: #999;
          span {
            color: #158aea;
          }
        }
      }
      .replyNum {
        font-size: 0.26rem;
        color: #158aea;
      }
    }
  }
}
</style>